import cs from './common.css';
import styles from './line.css';
import React, { useEffect } from 'react';
import useEchart from '../../hooks/useEchart';

const Color = require('color');
const dayjs = require('dayjs');
require('echarts/lib/chart/line');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/axisPointer');
// require("echarts/lib/component/markPoint");
// require("echarts/lib/component/markLine");
// require("echarts/lib/component/markArea");

const logCountInfo = [
  { time: 1596537026000, logCount: 33769, normal: true },
  { time: 1596620386000, logCount: 31440, normal: true },
  { time: 1596620787000, logCount: 30878, normal: true },
  { time: 1596784884000, logCount: 30030, normal: true },
  { time: 1598327378000, logCount: 29066, normal: true },
  { time: 1598327425000, logCount: 31440, normal: true },
  { time: 1598930383000, logCount: 33488, normal: true },
  { time: 1598930465000, logCount: 31440, normal: true },
  { time: 1598930535000, logCount: 21001, normal: true },
];

const theme = {
  primaryColor: '#108ee9', // 全局主色
};

/*
- 线条是 smooth 的
- y 轴说明，间隔具体值取自
- 线条下部是透明度渐变
- x 轴 label 时间转换格式
- hover 提示
*/

export default function Line() {
  const [refChart, onChartMount] = useEchart();
  useEffect(() => {
    refChart.current.setOption({
      title: {
        show: true,
        text: '日志量时间变化图',
        top: 'top',
        left: 'center',
        textStyle: {
          normal: {
            color: 'red',
          },
        },
      },
      tooltip: {
        // show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      grid: {
        left: '10%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        data: logCountInfo.map(v => new Date(v.time)),
        type: 'category',
        name: '采集时间',
        nameRotate: 30,
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          showMinLabel: true,
          showMaxLabel: true,
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          interval: 0, // 强制显示所有标签
          formatter: value => dayjs(value).format('H:mm'),
        },
      },
      yAxis: {
        type: 'value',
        name: '单位(万) 间隔：5min',
      },
      series: [
        {
          name: '日志量统计',
          type: 'line',
          data: logCountInfo.map(v => v.logCount),
          symbol: 'triangle',
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: theme.primaryColor,
            },
          },
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: Color(theme.primaryColor)
                      .fade(0.2)
                      .string(),
                  },
                  {
                    offset: 1,
                    color: Color(theme.primaryColor)
                      .fade(0.9)
                      .string(),
                  },
                ],
              },
            },
          },
        },
      ],
    });
  }, [refChart]);
  return (
    <div className={styles.normal}>
      <h1>Page line area logCountInfo</h1>
      <div ref={onChartMount} className={cs.chart}></div>
    </div>
  );
}
